<template>
  <static-container class="safety">
    <static-container-header>
      <template>
        <el-breadcrumb
          size="large"
          separator-class="el-icon-arrow-right">
          <transition-group name="breadcrumb">
            <el-breadcrumb-item :to="true" :key="1" @click.native="closeSubContent">安全中心</el-breadcrumb-item>
            <el-breadcrumb-item :key="2" v-if="isSubContentOpen">{{currentSubViewName}}</el-breadcrumb-item>
          </transition-group>
        </el-breadcrumb>
      </template>
      <template slot="right">
        <el-button
          v-if="isSubContentOpen"
          size="medium"
          @click="closeSubContent"> 返回</el-button>
      </template>
    </static-container-header>
    <static-container-body>

      <transition name="slide-fade" mode="out-in">
        <div v-if="!isSubContentOpen">
          <el-tip>
            为了确保您的账号安全，请您填写相关安全信息，以备不时之需
          </el-tip>
          <safety-card-group>
            <safety-card title="登录密码" sub-title="修改登录时的密码，定期修改有利于账户安全">
              <template slot="icon">
                <svg-icon icon-class="lock" type="info" />
              </template>
              <slot>
                <el-button type="primary" bold size="medium" @click="passwordModify">修改</el-button>
              </slot>
            </safety-card>

            <safety-card title="手机验证" sub-title="绑定手机，用于接收短信验证码">
              <template slot="icon">
                <svg-icon icon-class="mobile" type="info" />
              </template>
              <slot>
                <el-button type="primary" bold size="medium" @click="mobileContact" v-if="user.telephone">已验证</el-button>
                <el-button
                  bold
                  size="medium"
                  type="outline-info"
                  @click="mobileContact"
                  v-else>验证</el-button>
              </slot>
            </safety-card>

            <safety-card title="邮箱验证" sub-title="绑定邮箱，用于接收账户相关信息服务">
              <template slot="icon">
                <svg-icon icon-class="envelope" type="info" />
              </template>
              <slot>
                <el-button type="primary" bold size="medium" @click="emailContact" v-if="user.email">已验证</el-button>
                <el-button
                  bold
                  type="outline-info"
                  size="medium"
                  @click="emailContact" v-else>验证</el-button>
              </slot>
            </safety-card>

            <safety-card title="绑定银行卡" sub-title="设置修改提现银行卡，最多可绑定10张">
              <template slot="icon">
                <svg-icon icon-class="credit-card" type="info" />
              </template>
              <slot>
                <el-button type="primary" bold size="medium" @click="cardBind" v-if="isBindCard">修改</el-button>
                <el-button
                  bold
                  type="outline-info"
                  size="medium"
                  @click="cardBind" v-else>绑定</el-button>
              </slot>
            </safety-card>

          </safety-card-group>
        </div>
        <component :is="currentSubView" v-else></component>

      </transition>
    </static-container-body>

    <div v-transfer-dom>
      <el-dialog :visible.sync="dialogVisible" :before-close="() => {dialogVisible = false}" :title="dialogTitle"
                 :width="consts.DIALOG_SIZE_NORMAL">
        <component :is="dialogName"
                   @on-success="dialogVisible = false"
                   v-if="dialogName"
        ></component>
      </el-dialog>
    </div>
  </static-container>
</template>

<script type="text/jsx">
  import SafetyMobile from "@/views/user/safety/mobile-validate";
  import SafetyPassword from "@/views/user/safety/user-password";
  import SafetyEmail from "@/views/user/safety/email-bind";
  import SafetyCardBind from "@/views/user/safety/card-bind";

  import SafetyCardGroup from './safety-card-group';
  import SafetyCard from './safety-card';
  import SafetyDetailContent from './safety-detail-content';

  import {dialog, subContent} from '@/build';
  import CustomerService from "@/components/customer-service/index";

  export default {
    name: "user-safety",

    components: {
      CustomerService,
      SafetyCard,
      SafetyCardGroup,
      SafetyDetailContent,
      SafetyPassword,
      SafetyMobile,
      SafetyCardBind,
      SafetyEmail,
    },

    mixins: [dialog, subContent],

    provide() {
      return {
        setViewName: this.setViewName,
        closeSubContent: this.closeSubContent
      };
    },

    props: {
      action: {}
    },

    watch: {
      action: {
        handler(action) {
          if (action) {
            this[action]();
          }
        },
        immediate: true
      },
    },

    data() {
      return {
      };
    },

    computed: {
      ...mapState({
        user: state => state.user,
      }),
      ...mapGetters([
        'isBindCard',
        'isWithdrawProtect',
        'isBindMobile',
      ])
    },

    methods: {
      cardBind() {
        if (this.isBindMobile) {
          this.openSubContent('safety-card-bind');
        } else {
          this.bindMobileMessage();
        }
      },

      passwordModify() {
        this.openDialog({dialogName: 'safety-password'})
      },

      bindMobileMessage() {
        const vm = this.$messageTip({
          goToIcon: 'mobile',
          message: '设置安全中心功能，需要您先绑定手机号码，以便我们更全面的为您提供服务。',
          width: consts.DIALOG_SIZE_NORMAL,
          goTo: <div class="icon-link" onClick={() => {vm.close();this.openDialog({dialogName: 'safety-mobile'});}}>
            <svg-icon icon-class="mobile" type="primary"></svg-icon>立即绑定
          </div>
        });
      },
      mobileContact() {
        if (this.user.telephone) {
          const vm = this.$messageTip({
            message: `您已绑定手机${this.user.telephone}，若要修改，请联系客服。`,
            width: consts.DIALOG_SIZE_NORMAL,
            goTo: <customer-service nativeOnClick={() => {vm.close();}}><el-button type="primary" block>联系客服</el-button></customer-service>
          });
        } else {
          this.openDialog({dialogName: 'safety-mobile'});
        }
      },
      emailContact() {
        if (this.user.email) {
          const vm = this.$messageTip({
            message: `您已绑定邮箱${this.user.email}，若要修改，请联系客服。`,
            width: consts.DIALOG_SIZE_NORMAL,
            goTo: <customer-service nativeOnClick={() => {vm.close();}}><el-button type="primary" block>联系客服</el-button></customer-service>
          });
        } else {
          this.openDialog({dialogName: 'safety-email'});
        }
      }
    },
    mounted() {
      this.$store.dispatch(types.GET_SECURITY);
    }
  };
</script>

<style lang="scss">
  @include b(safety) {
    padding: 20px;
    min-height: 750px;
    @include main-center(800px);
  }
</style>
